<template>
  <div class="app-container">
    <el-form :model="searchForm" :inline="true">
      <el-row>
        <el-col :span="20">
          <el-form-item   prop="fuzzy">
            <el-input
              v-model="searchForm.fuzzy"
              style="width: 250px"
              placeholder="仪器名称/仪器编号/仪器型号"
            />
          </el-form-item>
          <el-form-item   prop="type" label="仪器类别">
            <el-select
              v-model="searchForm.type"
              style="width: 145px"
              placeholder="请选择仪器类别"
              clearable
            >
              <el-option
                v-for="item in typleList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item   prop="classType" label="检测类别">
            <el-select
              v-model="searchForm.classType"
              style="width: 145px"
              placeholder="请选择检测类别"
              clearable
            >
              <el-option
                v-for="item in classTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              class="iconfont icon-chaxun1"
              size="small"
              @click="handleSearch"
            >
              查询</el-button
            >
          </el-form-item>
        </el-col>
        <el-col :span="4" class="search-right">
          <el-button type="text" @click="newPurchase()">申购仪器</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div>
      <el-table
        ref="stockTable"
        stripe
        border
        :data="tableData"
        class="table-item"
        highlight-current-row
        :header-cell-style="{ background: '#ECF3FC' }"
        style="width: 100%"
      >
        <template slot="empty">
          <div class="table_empty">
            <div class="empty_tips">
              <span> 暂无数据 </span>
            </div>
          </div>
        </template>
        <el-table-column
          type="index"
          fixed="left"
          width="55"
          align="center"
          label="序号"
        />
        <el-table-column
          prop="name"
          label="仪器名称"
          fixed="left"
          width="80"
          align="center"
        />
        <el-table-column
          prop="manufacturer"
          label="仪器品牌"
          fixed="left"
          width="80"
          align="center"
        />
        <el-table-column
          prop="model"
          label="仪器型号"
          width="80"
          align="center"
        />
        <el-table-column
          prop="type"
          label="仪器类别"
          min-width="80"
          align="center"
        >
          <template slot-scope="{ row }">
            <div>
              {{ TYPE_STATUS[row.type] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="classType"
          label="检测类别"
          min-width="100px"
          align="center"
        >
          <template slot-scope="{ row }">
            <div>
              {{ CLASS_STATUS[row.classType] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="department"
          label="申购部门"
          width="80px"
          align="center"
        />
        <el-table-column
          prop="price"
          label="预计单价(元)"
          min-width="70px"
          align="center"
        />
        <el-table-column
          prop="amount"
          label="申购数量"
          min-width="80px"
          align="center"
        />
        <el-table-column
          prop="total"
          label="总价(元)"
          min-width="80px"
          align="center"
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.price * scope.row.amount }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="message"
          label="申请原因"
          min-width="120px"
          align="center"
        />
        <el-table-column
          prop="createUserName"
          label="申请人"
          min-width="80px"
          align="center"
        />
        <el-table-column
          prop="createTime"
          label="申请时间"
          min-width="120px"
          align="center"
        />
        <el-table-column
          prop="status"
          label="状态"
          min-width="120px"
          align="center"
        >
          <template slot-scope="{ row }">
            <el-tag :type="row.status|statusQualityFilter">
              {{ SUBMIT_STATUS[row.status] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" align="center" label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text" @click="lookInfo(scope.row.id)">
              查看</el-button
            >
            <div v-if=" scope.row.status != 6" class="erc-divider-vertical" />
            <el-button
             v-hasPermi="['system:role:edit']"
              v-if=" scope.row.status != 6"
              type="text"
              @click="editInfo(scope.row.id)"
            >
              修改</el-button
            >
            <div v-if="scope.row.status == 1" class="erc-divider-vertical" />
            <el-button v-if="scope.row.status == 1 ||scope.row.status == 5 " type="text" @click="submitExamine(scope.row)">
              提交审核</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="float: right">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="searchForm.pageNumber"
        :limit.sync="searchForm.pageSize"
        @pagination="handleSearch"
      />
    </div>
    <el-dialog
      title="申购仪器"
      :visible.sync="purchaseVisible"
      center
      @closed="dialogClose"
      top="5vh"
      width="50%"
    >
      <el-form
        ref="purchaseForm"
        :model="purchaseForm"
        :rules="rules"
        label-width="110px"
      >
        <el-row :gutter="12">
          <el-col :span="12">
            <el-form-item prop="name" label="仪器名称">
              <el-input
                :disabled="isEdit"
                v-model="purchaseForm.name"
                style="width: 70%"
                maxlength="20"
                placeholder="请输入仪器名称"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="8">
          <el-col :span="12">
            <el-form-item prop="type" label="仪器类别">
              <el-select
                :disabled="isEdit"
                v-model="purchaseForm.type"
                style="width: 70%"
                placeholder="请选择仪器类别"
                clearable
              >
                <el-option
                  v-for="item in typleList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="classType" label="检测类别">
              <el-select
                :disabled="isEdit"
                v-model="purchaseForm.classType"
                style="width: 70%"
                placeholder="请选择检测类别"
                clearable
              >
                <el-option
                  v-for="item in classTypeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="8">
          <el-col :span="12">
            <el-form-item prop="manufacturer" label="仪器品牌">
              <el-select
                :disabled="isEdit"
                v-model="purchaseForm.manufacturer"
                filterable
                allow-create
                style="width: 70%"
                placeholder="请选择仪器品牌"
                clearable
              >
                <el-option
                  v-for="(item, index) in modelList"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仪器型号" prop="model">
              <el-input
                :disabled="isEdit"
                v-model="purchaseForm.model"
                style="width: 70%"
                maxlength="20"
                placeholder="请输入仪器型号"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="8">
          <el-col :span="12">
            <el-form-item prop="price" label="预计单价(元)">
              <el-input-number
                :disabled="isEdit"
                v-model="purchaseForm.price"
                controls-position="right"
                style="width: 70%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申购数量" prop="amount">
              <el-input-number
                :disabled="isEdit"
                v-model="purchaseForm.amount"
                controls-position="right"
                style="width: 30%"
              />
              <span style="padding-left: 10px"
                >总价(元) :
                {{ purchaseForm.price * purchaseForm.amount || "" }}</span
              >
              <span>{{ purchaseForm.total }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="8">
          <el-col :span="12">
            <el-form-item prop="department" label="申购部门">
              <el-select
                :disabled="isEdit"
                v-model="purchaseForm.department"
                filterable
                style="width: 70%"
                placeholder="请选择申购部门"
                @change="changeDept"
                clearable
              >
                <el-option
                  v-for="item in deptList"
                  :key="item.deptId"
                  :label="item.deptName"
                  :value="{ value: item.deptId, label: item.deptName }"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="8">
          <el-col :span="24">
            <el-form-item prop="message" label="申请原因">
              <el-input
                type="textarea"
                :disabled="isEdit"
                :autosize="{ minRows: 2, maxRows: 99 }"
                placeholder="请输入申请原因"
                v-model="purchaseForm.message"
                style="width: 88%"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="submitButt == false">
        <el-button @click="purchaseVisible = false">取消</el-button>
        <el-button
          v-if="edit !== false"
          type="primary"
          @click="sumitaddDeviceApply('purchaseForm')"
          >确认</el-button
        >
        <el-button
          v-else
          type="primary"
          @click="editPurchaseForm('purchaseForm')"
          >确认</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
const SUBMIT_STATUS = {
  1: "待提交",
  2: "待仪器管理员审核",
  3: "待技术负责人审核",
  4: "待总经理审核",
  5: "已驳回",
  6: "已通过",
};
const CLASS_STATUS = {
  1: "水",
  2: "气",
  3: "噪声",
  4: "土壤、底泥、固废、污泥和生活垃圾",
  5: "样品制备",
  6: "小型分析仪器",
  7: "色谱仪",
  8: "光谱仪",
  9: "质谱仪",
};
const TYPE_STATUS = {
  1: "现场采样仪器",
  2: "现场检测仪器",
  3: "实验室仪器",
  4: "校准仪器",
  5: "样品制备仪器",
};
import * as instrServer from "@/api/instrument";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
export default {
  components: { Pagination },
  filters: {
    statusQualityFilter(status) {
      
     if (status === '5') {
        return 'danger'
      } else if (status === '6') {
        return 'success'
      } else if(status === '1'|| status === '2'|| status === '3'|| status === '4') {
        return ''
      }
    }
  },
  data() {
    return {
      rules: {
        name: [{ required: true, message: "请录入仪器名称", trigger: "blur" }],
        type: [{ required: true, message: "请选择仪器类别", trigger: "blur" }],
        price: [{ required: true, message: "请录入预计价格", trigger: "blur" }],
        amount: [
          { required: true, message: "请录入申购数量", trigger: "blur" },
        ],
      },
      TYPE_STATUS,
      CLASS_STATUS,
      SUBMIT_STATUS,
      edit: false,
      submitButt: false,
      modelList: [],
      isEdit: false,
      purchaseForm: {
        name: "",
        model: "",
        amount: "",
        price: "",
      },
      purchaseVisible: false,
      total: 0,
      getId: "",
      tableData: [],
      deptList: [],
      typleList: [
        {
          name: "现场采样仪器",
          id: 1,
        },
        {
          name: "现场检测仪器",
          id: 2,
        },
        {
          name: "实验室仪器",
          id: 3,
        },
        {
          name: "校准仪器",
          id: 4,
        },
      ],
      classTypeList: [
        {
          name: "水",
          id: 1,
        },
        {
          name: "气",
          id: 2,
        },
        {
          name: "噪声",
          id: 3,
        },
        {
          name: "土壤、底泥、固废、污泥和生活垃圾",
          id: 4,
        },
        {
          name: "样品制备",
          id: 5,
        },
        {
          name: "小型分析仪器",
          id: 6,
        },
        {
          name: "色谱仪",
          id: 7,
        },
        {
          name: "光谱仪",
          id: 8,
        },
        {
          name: "质谱仪",
          id: 9,
        },
      ],
      searchForm: {
        pageNumber: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    this.handleSearch();
    this.getPartmentList();
    this.getManufacturerVa();
  },
  methods: {
    newPurchase() {
      this.isEdit = false;
      this.edit = true;
      this.purchaseVisible = true;
    },
    sumitaddDeviceApply(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          instrServer.addDeviceApply(this.purchaseForm).then((res) => {
            if (res.code === 200) {
              this.$notify({
                title: "成功",
                message: res.message,
                type: "success",
              });
              this.handleSearch();
              this.purchaseVisible = false;
            } else {
              this.$notify({
                title: "失败",
                message: res.message,
                type: "error",
              });
              this.purchaseVisible = false;
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    editPurchaseForm(formName) {
      const id = this.getId;
      const data = {
        id,
        ...this.purchaseForm,
      };
      this.$refs[formName].validate((valid) => {
        if (valid) {
          instrServer.updateDeviceApply(data).then((res) => {
            if (res.code === 200) {
              this.$notify({
                title: "成功",
                message: res.message,
                type: "success",
              });
              this.handleSearch();
              this.purchaseVisible = false;
            } else {
              this.$notify({
                title: "失败",
                message: res.message,
                type: "error",
              });
              this.purchaseVisible = false;
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleSearch() {
      instrServer.getdeviceApplyList(this.searchForm).then((res) => {
        if (res.code === 200 && res.result) {
          this.tableData = res.result.records;
          this.total = res.result.total;
        }
      });
    },
    lookInfo(val) {
      this.purchaseVisible = true;
      this.isEdit = true;
      this.submitButt = true;
      const params = {
        id: val,
      };
      instrServer.getById(params).then((res) => {
        this.purchaseForm = res.result;
      });
    },
    editInfo(val) {
      this.purchaseVisible = true;
      this.isEdit = false;
      this.submitButt = false;
      this.getId = val;
      const params = {
        id: val,
      };
      instrServer.getById(params).then((res) => {
        this.purchaseForm = res.result;
      });
    },
    submitExamine(val) {
       const params = {
        id: val.id,
      };
      this.$confirm("确定提交审核?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          instrServer.submitPurchase(params).then((result) => {
            if (result.code === 200) {
              this.$notify({
                title: "成功",
                message: result.message,
                type: "success",
              });
              this.handleSearch();
            } else {
              this.$notify({
                title: "失败",
                message: result.message,
                type: "error",
              });
            }
          });
        })
        .catch(() => {});
    },
    getPartmentList() {
      const data = {
        status: 0,
        deptName: "",
      };
      instrServer.getselectDeptList(data).then((res) => {
        let applyArray = res.result.map((item) => {
          const appArr = {
            deptId: item.deptId,
            deptName: item.deptName,
          };
          return appArr;
        });
        let appObj = {};
        applyArray = applyArray.reduce((newArr, next) => {
          appObj[next.deptId]
            ? ""
            : (appObj[next.deptId] = true && newArr.push(next));
          return newArr;
        }, []);
        this.deptList = applyArray;
      });
    },
    getManufacturerVa() {
      instrServer.getManufacturer().then((res) => {
        this.modelList = res.result;
      });
    },
    changeDept(val) {
      console.log(this.purchaseForm.department);
      this.purchaseForm.department = val.label;
      this.purchaseForm.deptId = val.value;
    },
    dialogClose() {
      this.purchaseForm = {};
      this.edit = false;
      this.submitButt = false;
    },
  },
};
</script>

<style scoped lang="scss" >
.clearfix {
  line-height: 40px;
  display: flex;
}
</style>
